﻿body {
    background-color: #000;
    color: #fff;
    font-family: 'Segoe UI', Arial, Verdana, sans-serif;
}

#logo {
    float: left;
}

#articles {
    width: 300px !important;
    overflow-y: scroll;
    margin-top: 100px;
    height: 80%;
}

#votes {
    text-align: right;
    margin-right: 100px; 
}

    #votes a {
        display:block;
    }

span.author {
    color: #dbdbdb;
    font-style:italic
}

#btn-create-article {
    margin-top: 20px;
    margin-left: 195px;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
    margin: 0;
    padding: 0;
}

a {
    color: #fff;
    text-decoration: none;
}

#login {
    margin-top: 100px;
    text-align: center;
}

#register {
    margin-top: 30px;
    text-align: center;
}

fieldset {
    display: inline-block;
    border-radius: 10px;
}

#wrapper {
    width: 98%;
    margin: 0 auto;
    position: absolute;
}

#game-header {
    margin: 20px;
    text-align: right;
}

#active-games, #open-games {
    min-width: 16%;
    min-height: 350px;
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 20px;
    background-color: #5F4949;
}

#error-messages {
    padding-top: 30px;
    text-align: center;
    color: #FFDBDB;
    font-weight: bold;
}

#wrapper > #create-game {
    margin: 0 auto;
    text-align: center;
    max-width: 800px;
    border: 1px solid #fff;
    border-radius: 10px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    background-color: #5F4949;
}

#open-games {
    float: left;
}

#active-games {
    float: right;
}

#create-game {
    text-align: center;
}

button {
    margin-left: 10px;
    padding: 5px 15px;
    background-color: #655858;
    color: #fff;
    border-radius: 5px;
}

    button:hover {
        background-color: #7E6E68;
    }

#join {
    margin-top: -16px;
    padding-left: 80px;
}

    #join > input {
        display: block;
    }

#game-ready {
    font-size: small;
    color: #4cff00;
}

#in-progress {
    font-size: small;
    color: red;
}

#battleField {
    /*border: 1px solid #fff;*/
    width: 50%;
    margin: 0 auto;
    text-align: center;
}

.row {
    margin: 0;
    padding: 0;
}

    .row > div {
        background-color: #7F7373;
        margin: 0;
        padding: 0;
        width: 50px;
        height: 50px;
        display: inline-block;
        border: 1px solid #fff;
    }

.unit.red {
    width: 100%;
    height: 100%;
    background-color: red;
}

.unit.blue {
    width: 100%;
    height: 100%;
    background-color: #2F2FFF;
}

.unit.warrior {
    background-image: url(../images/warrior.png);
}

.unit.ranger {
    background-image: url(../images/ranger.png);
}

.selected {
    background-color: #acad30!important;
}

#user-data {
    float: right;
}


/*Article container*/

#wrapper #article-container {
    width: 68%;
    /*float: right;*/
    margin-left: 410px;
    margin-top: -500px;
    border: 2px solid white;
}

#articles {
    /*width: 350px;*/
    height: 100%;
    overflow-y: scroll;
    margin-top: 100px;
    height: 500px;
    width: 30%;
}

#article {
    border: 1px solid white;
    display: inline-block;
    height: 300px;
    width: 70%;
    right: 0;
}

#article-img {
     border: 1px solid white;
    margin-bottom: -145px;
    height:250px;
    width: 28%;
    right: 0;
}

#comment {
     border: 1px solid white;
    height: 80px;
}

#sub-comment {
     border: 1px solid white;
    width: 50%;    
    margin-left: 90px;
    width: 80%;
}